<template>
  <div>
    <!-- 顶部区域 -->
    <van-nav-bar title="前端最牛逼.vant" />
    <!-- 轮播图区域 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in swipeList" :key="index">
        <img :src="item.img" alt />
      </van-swipe-item>
    </van-swipe>
    <!-- 六宫格区域 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item :to="item.to" v-for="(item,index) in girdList" :key="index">
        <img :src="item.icon" alt />
        <p>{{item.text}}</p>
      </van-grid-item>
    </van-grid>
    <!-- 底部跳转区域 -->
    <!-- <van-tabbar v-model="active">
      <van-tabbar-item name="home" class="iconfont icon-index-fill" to="/home">首页</van-tabbar-item>
      <van-tabbar-item name="member" class="iconfont icon-icon_zhanghao" to="/member">会员</van-tabbar-item>
      <van-tabbar-item name="shopcar" icon="cart-o" info="0" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item name="search" icon="search" to="/search">搜索</van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 'home',
      // 轮播图列表
      swipeList: [],
      // 六宫格详情列表
      girdList: [
        {
          icon: require('../assets/menu1.png'),
          to: '/newslist',
          text: '新闻资讯'
        },
        {
          icon: require('../assets/menu2.png'),
          to: '/photo/list',
          text: '图片分享'
        },
        {
          icon: require('../assets/menu3.png'),
          to: '/goods/list',
          text: '商品购买'
        },
        { icon: require('../assets/menu4.png'), text: '留言反馈' },
        { icon: require('../assets/menu5.png'), text: '视频专区' },
        { icon: require('../assets/menu6.png'), text: '联系我们' }
      ]
    }
  },
  created() {
    this.getSwipe()
  },
  methods: {
    // 获取轮播图列表
    async getSwipe() {
      const { data: res } = await this.$http.get('/api/getlunbo')
      if (res.status !== 0)
        return this.$notify({ type: 'danger', message: '获取轮播图列表失败!' })
      this.swipeList = res.message
    }
  }
}
</script>

<style lang="less" scoped>
.van-swipe img {
  width: 100%;
  height: 200px;
}
.van-grid-item img {
  width: 60px;
  height: 60px;
}
</style>